<template>
  <div id="app-body">
    <el-card shadow="always">
      <!-- 查询关键字 -->
      <el-form :inline="true" :model="keyWords" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="keyWords.sname" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="学生地址">
          <el-input v-model="keyWords.addr" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="keyWords.cid" placeholder="班级">
            <el-option label="全部班级" value="0"></el-option>
            <el-option
              v-for="c in clasList"
              :label="c.cname"
              :value="c.cid"
              :key="c.cid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchStudent(1)" plain="">查询</el-button>
          <el-button type="success" @click="addStudent" plain="">添加</el-button>
          <el-button type="danger" @click="handleDelete" plain="" :disabled="select.length == 0">批量删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 学生列表 -->
      <el-table :data="stuList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="学号" width="180" prop="sid" />
        <el-table-column align="center" label="学生姓名" width="180" prop="sname" />
        <el-table-column align="center" label="性别" width="180" prop="sex" />
        <el-table-column align="center" label="地址" width="180" prop="addr" />
        <el-table-column align="center" label="班级" width="180" prop="cname" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        align="center"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import stuApi from "@/api/student/student";
import clasApi from "@/api/student/classes";

export default {
  data() {
    return {
      stuList: [],
      clasList: [],
      keyWords: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
      select: [],
      selectIds: [],
    };
  },

  created() {
    this.findAllClasses()
    this.searchStudent()
  },

  methods: {
    handleSelectionChange(val) {
      this.select = val;
    },

    findAllClasses() {
      clasApi.getAllClasses().then((resp) => {
        this.clasList = resp.data.list;
      });
    },

    searchStudent(pageNum) {
      if(pageNum) {
        this.pageNum = pageNum
      }
      stuApi.searchStudent(this.pageNum, this.pageSize, this.keyWords).then((resp) => {
        this.stuList = resp.data.pageModel.records;
        this.total = resp.data.pageModel.total;

        for(let stu of this.stuList) {
          for(let cla of this.clasList) {
            if(stu.cid == cla.cid) {
              stu.cname = cla.cname;
            }
          }
        }
      });
    },

    addStudent() {
        this.$router.push("/student/save");
    },

    //跳转修改
    handleEdit(index, row) {
    //   this.$router.push("/student/save/"+row.sid);
      this.$router.push("/student/save?sid="+row.sid);
    },


    handleDelete(index, row) {
      if(row && row.sid) {
        this.selectIds.push(row.sid);
      }else {
        for(let s of this.select) {
          this.selectIds.push(s.sid)
        }
      }

      this.$confirm(`此操作将永久删除学号为${this.selectIds}的学生, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this;
        stuApi.removeStudents(this.selectIds).then(resp => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });

          this.page = 1;
          this.searchStudent()
          this.selectIds = []
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
      
    },

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchStudent()
      },
    handleCurrentChange(val) {
    this.pageNum = val;
    this.searchStudent()
    }
  },
};
</script>

<style>
#app-body{
    /* text-align: center; */
}

.el-card .el-table{
    /* height: 800px */
}
</style>
